<template>
  <div class="customerNameSelect_module">
    <el-select
      v-model="localModelValue"
      :clearable="clearable"
      filterable
      @change="change"
      :placeholder="$t('storeManagement_customerNameSelect_placeholder')"
      :disabled="disabled"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
  </div>
</template>

<script lang="ts">
// 客户名称下拉列表组件

import { defineComponent, ref, watch } from "vue";
export default defineComponent({
  props: {
    modelValue: {
      type: String,
      default: () => "",
    },
    clearable: {
      type: Boolean,
      default: () => false,
    },
    disabled: {
      type: Boolean,
      degfault: () => (false)
    }
  },
  setup(props, { emit }) {
    interface optionDataType {
      value: string;
      label: string;
    }
    const options = ref<optionDataType[]>([]);
    const localModelValue = ref<string>(props.modelValue);
    // 获取标签
    const getLabels = (options: optionDataType[], selectedValues: string) => {
      let label = options.find((item) => item.value === selectedValues)?.label;
      return label;
    };

    const change = (payload: string) => {
      emit("update:modelValue", payload);
    };

    options.value = [
      {
        label: "张三",
        value: "zhangsan",
      },
      {
        label: "李四",
        value: "lisi",
      },
      {
        label: "王五",
        value: "wangwu",
      },
    ];

    watch(
      () => props.modelValue,
      (newVal) => {
        localModelValue.value = newVal
        emit("getLabels", getLabels(options.value, newVal));
        emit("update:modelValue", newVal);
      },
      {
        immediate: true,
      }
    );
    return {
      options,
      localModelValue,
      change,
    };
  },
});
</script>
<style scoped></style>
